// Copyright © SixtyFPS GmbH <info@slint-ui.com>
// SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-commercial

import { Theme } from "../theme.slint";

export component Switch {
    callback changed(bool /* checked */);
    callback clicked <=> i-touch-area.clicked;

    in-out property <bool> checked;

    min-height: 18px;
    width: 2 * self.height;

    i-container := Rectangle {
        border-color: Theme.palette.slint-blue-300;
        border-width: 2px;
        border-radius: self.height / 2;

        i-indicator := Rectangle {
            x: 2 * parent.border-width;
            height: parent.height - 4 * parent.border-width;
            width: self.height;
            border-radius: self.height / 2;
            background: Theme.palette.slint-blue-300;

            animate background { duration: Theme.durations.fast; }
            animate x { duration: Theme.durations.fast; }
        }

        animate border-color { duration: Theme.durations.fast; }
        animate background { duration: Theme.durations.fast; }
    }

    i-touch-area := TouchArea {
        clicked => {
            toggle-checked();
        }
    }

    function toggle-checked() {
        checked = !checked;
        changed(checked);
    }

    states [
        checked when checked : {
            i-container.background: Theme.palette.limon-green-op10;
            i-container.border-color: Theme.palette.limon-green;
            i-indicator.background: Theme.palette.limon-green;
            i-indicator.x: i-container.width - i-indicator.width - 2 * i-container.border-width;
        }
    ]
}